import ProGress from '@/components/ProGress/index.tsx';
import { CaretDownOutlined, CaretUpOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { Skeleton, Tooltip } from 'antd';
import { useState } from 'react';
import styles from './../index.less';
import SquerHead from './squerHead';

export default function PlaneArea(props) {
  const [loading, setLoading] = useState(true);
  let headData = props.data.headData;
  let data = props.data.data;
  setTimeout(() => {
    setLoading(false);
  }, 3000);
  return (
    <div>
      <Skeleton loading={loading} active paragraph={{ rows: 4, width: [100] }}>
        <SquerHead data={headData}></SquerHead>
        <div className={styles.conPlane}>
          {data !== undefined &&
            data.length > 0 &&
            data.map((item) => {
              return (
                <div className={styles.planeLi}>
                  <div>
                    <span className={styles.titleName}>{item.name}</span>
                    <Tooltip title={item.name} color="#fff">
                      <ExclamationCircleOutlined />
                    </Tooltip>
                  </div>
                  <div>
                    <span className={styles.num}>{item.val}</span>
                    <span className={styles.numDw}></span>
                    <span className={styles.fg}>/</span>
                    <span className={styles.numDw}>{item.val2}</span>
                    <span className={styles.numDw}></span>
                  </div>
                  <div className={styles.gressArea}>
                    <span className={styles.numDw}>目标差{item.target}</span>
                    <ProGress percent={item.target} showText={false}></ProGress>
                  </div>
                  <div>
                    <span className={styles.numDw}>同比</span>
                    <span className={item.tb > 0 ? styles.upColor : styles.downColor}>
                      {item.tb}%
                    </span>
                    {item.tb > 0 ? (
                      <CaretUpOutlined className={styles.upColor} />
                    ) : (
                      <CaretDownOutlined className={styles.downColor} />
                    )}
                  </div>
                </div>
              );
            })}
        </div>
      </Skeleton>
    </div>
  );
}
